// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-firefox';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-monitor';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-relay';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
@import '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-pocket';
@import '../protocol/components/fxa-form';

// * -------------------------------------------------------------------------- */
// FxA signup form

.l-accounts {
    margin: 0 auto;
    max-width: 330px;
    text-align: center;
}

.c-accounts-form {
    .mzp-c-form-title {
        @include text-title-sm;
    }

    .state-fxa-supported-signed-in & {
        display: none;
    }

    .fxa-signin {
        margin-bottom: 0;
    }

    @media #{$mq-lg} {
        @include bidi(((float, right, left),));

        @supports (display: grid) {
            float: none;
        }
    }
}

.c-manage {
    display: none;

    .state-fxa-supported-signed-in & {
        display: block;
    }
}


.accounts-header {
    margin-bottom: $layout-lg;
}

.accounts-products {
    h2 {
        @include text-title-xs;
        font-family: var(--body-font-family);
    }

    h4 {
        margin-top: $layout-sm;
        margin-bottom: 0;
    }

    ul {
        padding-left: 22px;
    }
}

.c-accounts-tagline {
    font-weight: bold;
    margin-top: $layout-sm;
}
